import React,{PureComponent} from 'react';
import {View, Text,Platform,ActivityIndicator} from 'react-native';
import { UltimateListView } from '@bang88/react-native-ultimate-listview';
import Icon from 'react-native-vector-icons/FontAwesome5';

export default class CustomList extends PureComponent {

    constructor(props) {
        super(props);
    }

    render() {
        const { renderItem, ...props } = this.props;

        return (
            <UltimateListView
                key="ant-list-view"
                keyExtractor={(_: any, index: number) => `item-${index}`} // this is required when you are using FlatList
                refreshableMode={Platform.OS === 'ios' ? 'advanced' : 'basic'}
                numColumns={1}
                waitingSpinnerText={'加载中...'}
                allLoadedText={'已加载完'}
                refreshableTitlePull={'下拉刷新'}
                refreshableTitleRelease={'释放加载'}
                refreshableTitleRefreshing={'加载中...'}
                emptyView={() => {
                    return this.props.emptyView ? (
                        this.props.emptyView()
                    ) : (
                        <View
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}
                        >
                            <Text style={{ textAlign: 'center', padding: '10%' }}>
                                {'暂无数据'}
                            </Text>
                        </View>
                    );
                }}
                customRefreshView={(status: number) => {
                    return (
                        <View style={{ flexDirection: 'row' }}>
                            {status === 2 ? (
                                <ActivityIndicator />
                            ) : (
                                <Icon
                                    name={status === 0 ? 'arrow-down' : 'arrow-up'}
                                    size={18}
                                />
                            )}
                            <Text style={{ marginLeft: 5 }}>
                                {status === 0
                                    ? '下拉刷新'
                                    : status === 1
                                        ? '释放加载'
                                        : '加载中...'}
                            </Text>
                        </View>
                    );
                }}
                {...props}
                item={renderItem}
            />
        )
    }
}
